<template>
  <div>
    <div class="pad_20 flex ba_f">
      <div>选择店铺</div>
      <div class="mar_l20">
        <el-select v-model="form.shopValue" placeholder="请选择" @change="changeStore">
          <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name+'(ID:'+item.id+')'"
                  :value="item.id">
          </el-option>
        </el-select>
        <!--                <el-select v-model="form.shopValue" placeholder="请选择">-->
        <!--                    <el-option-->
        <!--                            v-for="item in options"-->
        <!--                            :key="item.value"-->
        <!--                            :label="item.label"-->
        <!--                            :value="item.value">-->
        <!--                    </el-option>-->
        <!--                </el-select>-->
      </div>
    </div>
    <div class="outmain ba_f mar_t20">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>实时概况</span>
          <span class="fnormal fon_14 color_9 mar_l10">更新时间：{{ dateFormat(date) }}</span>
        </div>
      </div>
      <div class="flex-bet">
        <div class="bflex-7 flex">
          <div class="pad_20 flex-1 borderBG mar_r20">
            <div class="color_9 lh25">今日新增用户（人）</div>
            <div class="fon_30 title35 lhh40 wei">
              {{ ssgkData.todayUser }}
            </div>
            <div class="fon_14 color_9 flex lh25">
              <div class="">昨日：{{ ssgkData.yesUser }}</div>
            </div>
          </div>
          <div class="pad_20 flex-1 borderBG mar_r20">
            <div class="color_9 lh25">今日付费用户（人）</div>
            <div class="fon_30 title35 lhh40 wei">
              {{ ssgkData.payUser }}
            </div>
            <div class="fon_14 color_9 flex lh25">
              <div class="">昨日：{{ ssgkData.yesPayUser }}</div>
            </div>
          </div>
          <div class="pad_20 flex-1 borderBG mar_r20">
            <div class="color_9 lh25">会员用户（人）</div>
            <div class="fon_30 title35 lhh40 wei">{{ssgkData.userCardRecordCount}}</div>
            <div class="fon_14 color_9 flex lh25">
              <div class="">昨日：{{ssgkData.yesUserCardRecordCount}}</div>
            </div>
          </div>
          <div class="pad_20 flex-1 borderBG">
            <div class="color_9 lh25">累计用户（人）</div>
            <div class="fon_30 title35 lhh40 wei">
              {{ ssgkData.userSum }}
            </div>
            <div class="fon_14 color_9 flex lh25">
              <div class="">累计付费用户：{{ ssgkData.payUserCount }}</div>
<!--              <div class="mar_l20 color_f yc">较前一天：%</div>-->
            </div>
          </div>
<!--          <div class="pad_20 flex-g-1">-->
<!--            <div class="title6 lh25">客单价</div>-->
<!--            <div class="fon_30 title35 lhh40 wei">-->
<!--              {{ ssgkData.userPrice }}-->
<!--            </div>-->
<!--            <div class="fon_14 color_9 flex lh25">-->
<!--              昨日：￥{{ ssgkData.oldPrice }}%-->
<!--            </div>-->
<!--          </div>-->
        </div>
<!--        <div class="bflex-3 flex-bet">-->
<!--          <div class="pad_20 flex-g-1">-->
<!--            <div class="title6 lh25">客单价</div>-->
<!--            <div class="fon_30 title35 lhh40 wei">-->
<!--              <span class="fon_18">￥</span>{{ ssgkData.userPrice }}-->
<!--            </div>-->
<!--            <div class="fon_14 color_9 flex lh25">-->
<!--              昨日：￥{{ ssgkData.oldPrice }}%-->
<!--            </div>-->
<!--          </div>-->
<!--&lt;!&ndash;          <div class="flex-g-1">&ndash;&gt;-->
<!--&lt;!&ndash;            <div&ndash;&gt;-->
<!--&lt;!&ndash;              id="mainEch"&ndash;&gt;-->
<!--&lt;!&ndash;              style="height: 220px;width:300px;margin-left: 30px"&ndash;&gt;-->
<!--&lt;!&ndash;            ></div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--        </div>-->
      </div>
    </div>
    <div class="t_r mar_t20">
      <div class="fon_12 mar_r10 color_9">
        <span class="fon_14 color_3">时间筛选：</span>
        <el-date-picker
                v-model="form.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy年MM月dd日"
                class="mar_l10"
                @change="changeTime">
        </el-date-picker>
      </div>
    </div>
    <div class="mar_t20">
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1 ba_f pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>会员总览</span>
            </div>
          </div>
          <div id="mainEch32" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
        </div>
        <div class="flex-g-1 ba_f mar_lr20 pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>会员比例</span>
            </div>
          </div>
          <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
        </div>
        <div class="flex-g-1 ba_f pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>付费总览</span>
            </div>
          </div>
          <div id="mainEch34" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
        </div>
      </div>
    </div>
<!--    <div class="outmain ba_f mar_t10">-->
<!--      <div class="shuju_title mar_b20">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>用户概况</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="flex flex-nowrap pad_tb_10 c2RF">-->
<!--        <div class="crf all mar_r10 curset">-->
<!--          <p class="font_w500 fon_16 lh25">全部</p>-->
<!--          <div class="mar_t15 flex-bet fon_14">-->
<!--            <div class="color_9">用户数</div>-->
<!--            <div class="">{{ userData.userSum }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="crf mili mar_r10 notall">-->
<!--          <p class="font_w500 fon_16 lh25">小程序</p>-->
<!--          <div class="mar_t15 flex-bet fon_14">-->
<!--            <div class="color_9">用户数</div>-->
<!--            <div class="">{{ userData.miniSum }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="mar_t20">-->
<!--        <div class="flex mar_b5" style="background: rgb(92, 137, 253)">-->
<!--          <div class="serleft color_f pad_lr_10 t_c flex">-->
<!--            <span class="fon_16">用户渠道</span>-->
<!--          </div>-->
<!--          <div class="serright pad_lr_10">-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">新增用户数</div>-->
<!--              <div class="pad_tb_10">{{ userData.newSum }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.userBilv }}%</div>-->
<!--            </div>-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">付费用户数</div>-->
<!--              <div class="pad_tb_10">{{ userData.payUser }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.payBilv }}%</div>-->
<!--            </div>-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">用户总数</div>-->
<!--              <div class="pad_tb_10">{{ userData.userCount }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.userBilvCount }}%</div>-->
<!--            </div>-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">付费用户总数</div>-->
<!--              <div class="pad_tb_10">{{ userData.paySum }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.paySumBilv }}%</div>-->
<!--            </div>-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">跳失率</div>-->
<!--              <div class="pad_tb_10">{{ userData.tiaoToday }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.tiaoBilv }}%</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex mar_b5" style="background: rgb(88, 202, 121)">-->
<!--          <div-->
<!--            class="serleft color_f pad_lr_10 t_c flex"-->
<!--            style="background: rgb(88, 202, 121)"-->
<!--          >-->
<!--            <span class="fon_16">成交转化</span>-->
<!--          </div>-->
<!--          <div-->
<!--            class="serright pad_lr_10"-->
<!--            style="background: rgb(240, 248, 240);"-->
<!--          >-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">支付人数</div>-->
<!--              <div class="pad_tb_10">{{ userData.payUser }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.payBilv }}%</div>-->
<!--            </div>-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">支付金额</div>-->
<!--              <div class="pad_tb_10">{{ userData.sumMoney }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.sumBilv }}%</div>-->
<!--            </div>-->
<!--            <div class="rightmoder pad_20 fon_14">-->
<!--              <div class="">客单价</div>-->
<!--              <div class="pad_tb_10">{{ userData.keMoney }}</div>-->
<!--              <div class="color_9">较前一日 {{ userData.keBilv }}%</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="outmain ba_f mar_t20">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>用户总览</span>
        </div>
      </div>
      <div id="mainEch2" style="height:400px"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import { userIndex, getUserData } from "@/api/statistics";
import { changeDate } from "@/utils/index";
import {mapState} from "vuex";

export default {
  mounted() {
    this.bus.$emit("loading", true);
    this.init();
    // this.mainEch32()
    // this.mainEch33()
    // this.mainEch34()
  },
  created() {
    this.form.shopValue = this.market[0].id
    this.options = this.market
  },
  computed:{
    ...mapState(['market'])
  },
  data() {
    return {
      form: {
        shopValue: "",
        timeType: "1",
        time: [new Date().setDate(new Date().getDate() - 15),new Date()],
        Mtime: " "
      },
      options: [
        {
          value: "1",
          label: "全部"
        }
      ],
      options2: [
        {
          value: "1",
          label: "自然日"
        },
        {
          value: "2",
          label: "自然月"
        }
      ],
      ssgkData: {
        dePay: "",
        deUser: "",
        oldPrice: "",
        payUser: "",
        payUserCount: "",
        todayUser: "",
        userPrice: "",
        userSum: "",
        yesPayUser: "",
        yesUser: "",
        userCardRecordCount: "",
        yesUserCardRecordCount: "",
      }, //实施概况数据
      userData: {
        userSum: "",
        miniSum: "",
        newSum: "",
        userBilv: "",
        payUser: "",
        payBilv: "",
        userCount: "",
        userBilvCount: "",
        paySum: "",
        paySumBilv: "",
        tiaoToday: "",
        tiaoBilv: "",
        sumMoney: "",
        sumBilv: "",
        keMoney: "",
        keBilv: ""
      }, //实施概况数据
      echarts1_option: {
        color: ["#5654F5", "#4CA8FF", "#4EC478", "#FBA33F"],
        // tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b}: {c} ({d}%)'
        // },
        legend: {
          orient: "vertical",
          right: 0,
          data: ["付费用户", "未付费用户"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: "付费用户" },
              { value: 310, name: "未付费用户" }
            ]
          }
        ]
      },
      echarts1_option2: {
        color: ["#2A75ED", "#2FCE63"],
        // title: {
        //   text: '折线图堆叠'
        // },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["新增用户", "付费用户"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ccc",
              type: "dashed"
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
              fontSize: "12"
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: "#f7f7f7",
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: ["1", "2", "3", "4", "5", "6", "7"]
        },
        yAxis: {
          type: "value",
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
              fontSize: "12"
            }
          },
          splitLine: {
            lineStyle: {
              type: "dotted",
              color: "#DDDDDD"
            },
            show: true
          }
        },
        series: [
          {
            name: "新增用户",
            type: "line",
            stack: "总量",
            data: [],
            smooth: true
          },
          {
            name: "付费用户",
            type: "line",
            stack: "总量",
            data: [],
            smooth: true
          }
        ]
      },
      date: new Date(),
      echarts32_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信小程序', '支付宝小程序']
        },
        series: [
          {
            name: '会员总览',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信小程序'},
              {value: 20.00, name: '支付宝小程序'},
            ],
          }
        ]
      },
      echarts33_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['会员用户', '普通用户',]
        },
        series: [
          {
            name: '会员比例',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '会员用户'},
              {value: 20.00, name: '普通用户'},
            ],
          }
        ]
      },
      echarts34_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['付费用户', '未付费用户']
        },
        series: [
          {
            name: '付费总览',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '付费用户'},
              {value: 20.00, name: '未付费用户'},
            ],
          }
        ]
      },
    };
  },
  methods: {
    init() {
      this.userIndex();
      this.getUserData();
    },
    async userIndex() {
      const { data } = await userIndex({storeId:this.form.shopValue});
      console.log(data);
      if (data) {
        this.ssgkData.todayUser = data.todayUser;
        this.ssgkData.yesUser = data.yesUser;
        this.ssgkData.deUser = data.deUser;
        this.ssgkData.payUser = data.payUser;
        this.ssgkData.yesPayUser = data.yesPayUser;
        this.ssgkData.dePay = data.dePay;
        this.ssgkData.userSum = data.userSum;
        this.ssgkData.payUserCount = data.payUserCount;
        this.ssgkData.userPrice = data.userPrice;
        this.ssgkData.oldPrice = data.oldPrice;
        this.ssgkData.userCardRecordCount = data.userCardRecordCount;
        this.ssgkData.yesUserCardRecordCount = data.yesUserCardRecordCount;

        // let wfeUser = [],
        //   fuUser = [];
        // fuUser.push(+data.payUserCount);
        // wfeUser.push(+data.userSum - +data.payUserCount);
        // this.echarts1_option.series[0].data[0].value = fuUser;
        // this.echarts1_option.series[0].data[1].value = wfeUser;
        // this.echarts1_option.series[0].data[0].name = ["付费用户"];
        // this.echarts1_option.series[0].data[1].name = ["未付费用户"];
        // this.ssgk();
        this.bus.$emit("loading", false);
      }
    },
    async getUserData() {
      let startTime = '';
      let endTime = '';
      if(this.form.time){
        startTime  = changeDate(this.form.time[0]);
        endTime = changeDate(this.form.time[1]);
      }
      var params = {
        startTime,
        endTime,
        storeId:this.form.shopValue,
      }
      const { data } = await getUserData(params);
      // console.log(data)
      if (data) {
        // this.userData.userSum = data.userSum;
        // this.userData.miniSum = data.miniSum;
        // this.userData.newSum = data.newSum;
        // this.userData.userBilv = data.userBilv;
        // this.userData.payUser = data.payUser;
        // this.userData.payBilv = data.payBilv;
        // this.userData.userCount = data.userCount;
        // this.userData.userBilvCount = data.userBilvCount;
        // this.userData.paySum = data.paySum;
        // this.userData.paySumBilv = data.paySumBilv;
        // this.userData.tiaoToday = data.tiaoToday;
        // this.userData.tiaoBilv = data.tiaoBilv;
        // this.userData.sumMoney = data.sumMoney;
        // this.userData.sumBilv = data.sumBilv;
        // this.userData.keMoney = data.keMoney;
        // this.userData.keBilv = data.keBilv;
        console.log(data);
        this.echarts32_option.series[0].data[0].value = +data.miniSum;
        this.echarts32_option.series[0].data[1].value = +data.aliSum;
        this.mainEch32()
        this.echarts33_option.series[0].data[0].value = +data.vipSUm;
        this.echarts33_option.series[0].data[1].value = +data.userPlain;
        this.mainEch33()
        this.echarts34_option.series[0].data[0].value = +data.vipNum;
        this.echarts34_option.series[0].data[1].value = +data.noPayNum;
        this.mainEch34()
        this.bus.$emit('loading', false);
        this.echarts1_option2.series[0].data = data.userChar.map(item => item.money);
        // this.echarts1_option2.series[1].data = data.userCountChar.map(item => item.money);
        this.echarts1_option2.series[1].data = data.OrderChar.map(item => item.money);
        this.echarts1_option2.xAxis.data = data.userChar.map(item => item.hours);
        this.yhzl();
      }
      // console.log('22', data)
    },

    // ssgk() {
    //   let myChart = echarts.init(document.getElementById("mainEch"));
    //   myChart.setOption(this.echarts1_option, true);
    // },
    yhzl() {
      let myChart = echarts.init(document.getElementById("mainEch2"));
      myChart.setOption(this.echarts1_option2, true);
    },
    changeTime() {
      this.getUserData();
    },
    changeStore(){
      this.getUserData();
      this.userIndex();
    },
    mainEch32() {
      let myChart = echarts.init(document.getElementById('mainEch32'))
      myChart.setOption(this.echarts32_option, true)
    },
    mainEch33() {
      let myChart = echarts.init(document.getElementById('mainEch33'))
      myChart.setOption(this.echarts33_option, true)
    },
    mainEch34() {
      let myChart = echarts.init(document.getElementById('mainEch34'))
      myChart.setOption(this.echarts34_option, true)
    },
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    // init2() {
    //     // var echarts = require('echarts');
    //     let myChart = echarts.init(document.getElementById('mainEch2'))
    //     myChart.setOption(this.echarts1_option2, true)
    // }
  }
};
</script>
<style lang="scss" scoped>
.c2RF {
  height: 92px;
}

.curset {
  background-color: #edf4ff;
  border-color: #155bd4;
}

.crf {
  height: 92px;
  min-width: 200px;
  max-width: 240px;
  border: 1px solid #dcdee0;
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
  flex: 1 1 200px;
  cursor: pointer;
  transition: box-shadow 0.2s ease 0s;
}

.serleft {
  background-color: rgb(92, 137, 253);
  min-width: 80px;
}

.serright {
  background-color: rgb(243, 247, 253);
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.rightmoder {
  min-width: 200px;
  width: 25%;
}

.notall {
  color: #c8c9cc;
  background-color: #f7f8fa;
  cursor: not-allowed;
}

.lhh40 {
  line-height: 40px;
  height: 40px;
}
</style>
